<template>
  <div>
    <div>
      <Row>
        <Col span="6" style="padding-right:10px">
          <Input v-model="refNumber" type="textarea" placeholder="订单号" />
        </Col>
        <Col v-if="customerOptions && customerOptions.length > 0" span="6" style="padding-right:10px">
          <Select v-model="orgOwner" filterable clearable placeholder="请选择客户">
            <Option v-for="item in customerOptions" :key="item.orgOwnerName" :value="item.orgOwner">{{ item.orgOwnerName }}</Option>
          </Select>
        </Col>
        <Col span="6" style="padding-right:10px">
          <Button type="primary" @click="list">搜索</Button>
        </Col>
      </Row>
      <Divider />
      <!-- <div style="text-align: right;">
        <Button v-has="70401" @click="add" type="primary">导出</Button>
    </div> -->
      <Table :columns="table_header" border :data="table_body">
      <!-- <template slot-scope="{ row, index }" slot="trace">
        <Tooltip max-width="200" :content="row.trace">
          <Icon type="ios-help-circle-outline" />
        </Tooltip>
      </template> -->
      </Table>
      <div style="text-align: right; padding-top: 10px;">
        <Page show-sizer :page-size-opts="pageSizeOpts" :page-size="pageSize" :total="pageTotal" @on-page-size-change="onPageSizeChange" @on-change="onPageChange" />
      </div>
    </div>
  </div>
</template>
<script>
import request from '@/utils/request'
import { mapState } from 'vuex'
export default {
  data() {
    return {
      table_header: [
        {
          title: '订单号',
          key: 'orderNumber'
        },
        {
          title: '客户',
          key: 'orgOwner'
        },
        {
          title: '客户订单号',
          key: 'refNumbers'
        },
        {
          title: '渠道名称',
          key: 'channelName'
        },
        {
          title: '费用类型',
          key: 'chargeType'
        },
        {
          title: '冻结金额',
          key: 'amount'
        },
        {
          title: '币种',
          key: 'currency'
        },
        {
          title: '冻结时间',
          key: 'txDate'
        }
        // {
        //   title: '明细',
        //   slot: 'trace'
        // }
      ],
      table_body: [

      ],
      styles: {
        height: 'calc(100% - 55px)',
        overflow: 'auto',
        paddingBottom: '53px',
        position: 'static'
      },
      formDataDefault: {
        currency: '',
        amount: '',
        bankCardNumber: '',
        bankRecept: '',
        remark: ''
      },
      formData: {
        txId: '',
        exchangeAmount: '',
        exchangeRate: '',
        currency: '',
        amount: '',
        bankCardNumber: '',
        bankRecept: '',
        remark: ''
      },
      queryData: {
        pageSize: 50,
        currentPage: 0,
        orgOwners: [],
        orderIds: []
      },
      refNumber: '',
      orgOwner: '',
      pageTotal: 0,
      pageSizeOpts: [50, 100]
    }
  },
  created() {
    this.$store.dispatch('getCustomerOptions')
    this.list()
  },
  mounted() {
  },
  methods: {
    list() {
      if (this.refNumber) {
        this.queryData.orderIds = this.refNumber.split(/\n|,|，/)
      } else {
        this.queryData.orderIds = []
      }
      if (this.orgOwner) {
        this.queryData.orgOwners = [(this.orgOwner)]
      } else {
        this.queryData.orgOwners = []
      }
      request({
        url: 'charge/order-charge-freezed',
        method: 'post',
        data: this.queryData
      }).then(res => {
        if (res.success) {
          if (res.data) {
            this.table_body = res.data.records
            this.pageTotal = res.data.total
          }
        }
      })
    },
    settlementStatusChange() {
      this.list()
    },
    onPageSizeChange(pageSize) {
      this.queryData.pageSize = pageSize
      this.list()
    },
    onPageChange(page) {
      this.queryData.currentPage = page
      this.list()
    }
  },
  computed: {
    pageSize() {
      return this.pageSizeOpts[0]
    },
    ...mapState(//
      {
        customerOptions: state => state.base.customerOptions
      }
    )
  }
}
</script>
<style>
    .demo-drawer-footer{
        width: 100%;
        position: absolute;
        bottom: 0;
        left: 0;
        border-top: 1px solid #e8e8e8;
        padding: 10px 16px;
        text-align: right;
        background: #fff;
    }

    .demo-upload-list{
        display: inline-block;
        width: 60px;
        height: 60px;
        text-align: center;
        line-height: 60px;
        border: 1px solid transparent;
        border-radius: 4px;
        overflow: hidden;
        background: #fff;
        position: relative;
        box-shadow: 0 1px 1px rgba(0,0,0,.2);
        margin-right: 4px;
    }
    .demo-upload-list img{
        width: 100%;
        height: 100%;
    }
    .demo-upload-list-cover{
        display: none;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        background: rgba(0,0,0,.6);
    }
    .demo-upload-list:hover .demo-upload-list-cover{
        display: block;
    }
    .demo-upload-list-cover i{
        color: #fff;
        font-size: 20px;
        cursor: pointer;
        margin: 0 2px;
    }
</style>
